<template>
  <view class="goods-waterfall">
    <!-- 列表区域 -->
    <view id="left-column" class="u-column">
      <view v-for="(it, ix) in leftList" :key="ix" class="column-item" @click="_handleClick(it)">
        <view class="cover-content">
          <!-- ?x-oss-process=image/resize,w_255 OSS1.5倍图-->
          <image :src="it.image+'?x-oss-process=image/resize,w_255'" lazy-load mode="aspectFill" class="cover-image" />
          <view v-if="it.communityLogo" class="user-content">
            <image :src="it.communityLogo" lazy-load mode="aspectFill" class="avatar" />
            <view class="user-name">{{it.communityName}}</view>
          </view>
          <view v-if="it.communityLogo"  class="mask"></view>
        </view>
        <view class="desc-content">
          <view class="title">
            <text v-if="type==1&&it.goodsHasHelpSell==1" class="tag">可帮卖</text>
            <text>{{it.goodsName}}</text>
          </view>
          <view class="justify-between u-col-center u-m-b-16">
            <view class="price">
              <text class="u-font-xs">￥</text>
              <text class="fz-16">{{it.minSalePrice}}</text>
              <!-- <text class="fz-16">{{it.salePriceObj.x}}</text>-->
              <!-- <text class="u-font-xs">{{it.salePriceObj.y}}</text>-->
            </view>
            <view class="buy-num">{{playVolumeFn(it.saleCount)||0}}跟团</view>
          </view>
          <!-- 可帮卖商品列表 -->
          <template v-if="type==2">
            <button
                v-if="it.isSelected==0"
                hover-class="hover"
                class="button help-sell-btn"
                @click.stop="_handleHelp(it)"
            >
              <view class="btn-lf">
                <text class="fz-12">赚￥</text>
                <text class="gain-price">{{it.maxCommission||0}}</text>
                <!-- <text class="gain-price">{{it.commissionObj.x}}</text>-->
                <!-- <text class="fz-12">{{it.commissionObj.y}}</text>-->
              </view>
              <view class="btn-rt">
                <image src="https://image.qqpyyds.com/mpAppImg/icon/vector_icon.png" class="vector_icon" />
                <view class="txt">
                  <text class="fz-12">去帮卖</text>
                  <text class="iconfont icon-arrow_right fz-12"></text>
                </view>
              </view>
            </button>
            <view v-else class="button disable-btn">已帮卖</view>
          </template>
        </view>
      </view>
    </view>
    <view id="right-column" class="u-column">
      <view v-for="(it, ix) in rightList" :key="ix" class="column-item" @click="_handleClick(it)">
        <view class="cover-content">
          <!-- ?x-oss-process=image/resize,w_255 OSS1.5倍图-->
          <image :src="it.image+'?x-oss-process=image/resize,w_255'" lazy-load mode="aspectFill" class="cover-image" />
          <view v-if="it.communityLogo||it.communityName" class="user-content">
            <image :src="it.communityLogo" lazy-load mode="aspectFill" class="avatar" />
            <view class="user-name">{{it.communityName}}</view>
          </view>
          <view v-if="it.communityLogo" class="mask"></view>
        </view>
        <view class="desc-content">
          <view class="title">
            <text v-if="type==1&&it.goodsHasHelpSell==1" class="tag">可帮卖</text>
            <text>{{it.goodsName}}</text>
          </view>
          <view class="justify-between u-col-center u-m-b-16">
            <view class="price">
              <text class="u-font-xs">￥</text>
              <text class="fz-16">{{it.minSalePrice}}</text>
              <!-- <text class="fz-16">{{it.salePriceObj.x}}</text>-->
              <!-- <text class="u-font-xs">{{it.salePriceObj.y}}</text>-->
            </view>
            <view class="buy-num">{{playVolumeFn(it.saleCount)||0}}跟团</view>
          </view>
          <!-- 可帮卖商品列表 -->
          <template v-if="type==2">
            <button
                v-if="it.isSelected==0"
                hover-class="hover"
                class="button help-sell-btn"
                @click.stop="_handleHelp(it)"
            >
              <view class="btn-lf">
                <text class="fz-12">赚￥</text>
                <text class="gain-price">{{it.maxCommission||0}}</text>
                <!-- <text class="gain-price">{{it.commissionObj.x}}</text>-->
                <!-- <text class="fz-12">{{it.commissionObj.y}}</text>-->
              </view>
              <view class="btn-rt">
                <image src="https://image.qqpyyds.com/mpAppImg/icon/vector_icon.png" class="vector_icon" />
                <view class="txt">
                  <text class="fz-12">去帮卖</text>
                  <text class="iconfont icon-arrow_right fz-12"></text>
                </view>
              </view>
            </button>
            <view v-else class="button disable-btn">已帮卖</view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { splitPrice } from '@/utils/common.js'
import { isArray } from '@/utils/is'
import Util from '@/api/util.js'
export default {
  name: 'goodsWaterfall',
  props: {
    type: { // type-->1：商城列表、2：可帮卖商品列表
      type: [String, Number],
      default: 1
    },
    // 瀑布流数据
    value: {
      type: Array,
      required: true,
      default: () => []
    },
    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
    // 单位ms
    addTime: {
      type: [Number, String],
      default: 2
    },
  },
  data() {
    return {
      leftList: [], // 左侧瀑布流列表
      rightList: [], // 右侧瀑布流列表
      tempList: [], // 中间变量列表
    }
  },
  watch: {
    copyFlowList(nVal, oVal) {
      // 取差值，即数组有变化新增的部分
      const startIndex = isArray(oVal) && oVal.length > 0 ? oVal.length : 0
      // 拼接上原有数据
      this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)))
      this.splitData()
    },
  },
  computed: {
    // 破坏瀑布流数据list变量的应用，否则watch的结果新旧值是一样的
    copyFlowList() {
      return this.cloneData(this.value)
    }
  },
  mounted() {
    this.tempList = this.cloneData(this.copyFlowList)
    this.splitData()
  },
  methods: {
    async splitData() {
      if (!this.tempList.length) return

      const leftRect = await this.$uGetRect('#left-column')
      const rightRect = await this.$uGetRect('#right-column')
      // 若左边小于或等于右边，就添加到左边，否则添加到右边
      const item = this.tempList[0]
      // 切割销售价格
      // item.salePriceObj = splitPrice(item.minSalePrice)
      if (this.type == 2) {
        // 处理帮卖赚佣金价格超过1万
        if ((parseInt(item.maxCommission) / 10000) >= 1) {
          const unit = '万'
          // 切割帮卖赚佣金价格
          const commissionObj = splitPrice(parseInt(item.maxCommission) / 10000)
          // 赚xx，仅取一位小数
          if (commissionObj.y.length >= 3) {
            commissionObj.y = commissionObj.y.slice(0, 2)
          }
          commissionObj.y += unit
          item.maxCommission = commissionObj.x + commissionObj.y
        }
        // // 添加额外字段--显示已帮卖按钮--使用响应式--解决状态更新，视图不更新问题
        // this.$set(item, 'hasHelpSell', false)
      }
      // 商品列表中的image是一个字符串数组，需要将其第一项中的url值拿出
      if (Object.prototype.hasOwnProperty.call(item, 'image')) {
        try {
          const imageArr = JSON.parse(item.image)
          if (isArray(imageArr) && imageArr.length) {
            item.image = imageArr[0].url || ''
          }
        } catch {
          item.image = ''
        }
      }
      if (!item) return
      if (leftRect.height < rightRect.height) {
        this.leftList.push(item)
      } else if (leftRect.height > rightRect.height) {
        this.rightList.push(item)
      } else {
        // 第一、第二张添加时，保证左右都有内容
        if (this.leftList.length <= this.rightList.length) {
          this.leftList.push(item)
        } else {
          this.rightList.push(item)
        }
      }

      // 移除临时列表的第一项
      this.tempList.splice(0, 1)
      // 若临时数组还有数据，继续循环
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData()
        }, parseInt(this.addTime))
      }
    },
    // 深复制--避免引用对象和数组
    cloneData(data) {
      return JSON.parse(JSON.stringify(data))
    },
    // 清空数据列表
    clear() {
      this.leftList = []
      this.rightList = []
      // 同时清除父组件列表中的数据
      this.$emit('input', [])
      this.tempList = []
    },
    // 帮卖按钮
    _handleHelp(item) {
      this.$u.debounce(() => {
        this.$emit('drawHS', item)
      }, 500)
    },
    // 调整商品详情
    _handleClick(item) {
      this.navigateTo({ url: `/pagesB/goods/goodsDetails?shopWindowId=${item.shopWindowId}` })
    },
    playVolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>